<template>
<!-- 验证身份 -->
  <div class="identity" v-if="show">
      <p class="identityTitle">为确认是本人操作，请完成以下验证！</p>
      <div class="identityContent" @keyup.13="bottomBut">
        <!-- 所在地区 -->
        <div class="area">
          <span>所在地区：</span>
          <div class="areaInput">
            <input type="text" disabled value="中国 +86">
            <!-- <span><i></i></span> -->
          </div>
          <!-- <ul>
              <li></li>
              <li></li>
              <li></li>
          </ul> -->
        </div>
        <!-- 手机号 -->
        <div class="phone">
          <span class="phontTitle">手机号：</span>
          <input type="text" id="phone" placeholder="请输入11位手机号码" autofocus v-model="phone" @blur="phoneBlur">
          <span class="phoneError"><i :class="phoneIcon"></i><span>{{phoneError}}</span></span>
        </div>
        <!-- 下一步 -->
        <div class="identityB">
          <input type="button" class="identityBut" value="下一步" @click = "bottomBut">          
        </div>
      </div>
      <!-- 已经注册弹出框 -->
      <div class="identityN" v-if="identityBox == '1'">
          <p class="identityNT">提示</p>
          <p class="identityFont">该手机已注册，可以通过密码登录！</p>
          <button class="identityNclose" @click="vaildateClose">取消</button>
          <button>登录</button>
      </div>
      <!-- 发送验证码弹出框 -->
      <div class="identityY" v-else-if="identityBox == '0'" @keyup.13="vaildateBut">
        <div class="identityYClose">
          <i @click="vaildateClose"></i>              
        </div>
        <p class="identityYTitle">验证手机</p>
        <span class="identityYremind">验证码已发送至你的手机，15分钟内有效，请勿泄露！</span>
        <div class="identityYFrom">
          <div class="identityYphone">
              <span>手机号 ：</span>
              <span class="phoneNumV">{{phone}}</span>
          </div>
          <div class="identityYvaildate">
              <span>验证码：</span>
              <input type="text" placeholder="请输入验证码" autofocus v-model="vaildateVal" @blur="vaildateB" @focus="vaildateF">
              <button @click="newVaildate" :class="VaildateNewBtn" :disabled="vailDisabled">{{vaildateData}}</button>
              <span class="VaildateError">
                <i :class="vaildataIcon"></i>
                <span>{{VaildateErrorCon}}</span>
              </span>
          </div>
        </div>
        <button class="identityYBut" @click="vaildateBut">确定</button>
      </div>

  </div>
</template>

<script>
export default {
  props: [
    'show',
    'typeNum'
  ],
  data () {
    return {
      phone: '', // 手机号码内容
      vaildateData: '重新获取 (60s)', // 重新发送验证码倒计时
      vailDisabled: false, // 重新发送验证码是否可点击
      phoneError: '', // 手机输入框报错内容
      identityBox: '', // 点击下一步显示某一个弹出框
      phoneTrue: false, // 点击下一步输入框是否符合规范
      vaildateVal: '', // 验证码内容
      VaildateError: false, // 验证码报错是否显示
      VaildateErrorCon: '',  // 验证码报错内容
      phoneIcon: '',
      vaildataIcon: '',
      VaildateNewBtn: '',
      vaildataNum: 60
    }
  },
  methods: {
    // 点击下一步,根据input失去焦点事件判断,弹出框及报错
    bottomBut: function () {
      this.phoneInput()
      if (this.phoneTrue) {
        var phone = document.getElementById('phone')
        this.identityBox = '0'
        this.phoneErrorHide = false
        this.newVaildate()
        phone.blur()
      } else if (this.phone === '') {
        this.phoneError = '手机号码不能为空'
        this.phoneErrorHide = true
        this.phoneIcon = 'VaildateErrori'      
      } else {
        this.phoneError = '手机号码格式不正确'
        this.phoneErrorHide = true
        this.phoneIcon = 'VaildateErrori'
      }
    },
    // 点击重新获取验证码倒计时事件
    newVaildate: function () {
      var T = this
      T.vailDisabled = true
      var interval = setInterval(function () {
        T.vaildataNum -= 1
        T.vaildateData = '重新获取 (' + T.vaildataNum + 's)' 
        T.VaildateNewBtn = ''
        if (T.vaildataNum === 0) {
          clearInterval(interval)
          T.vailDisabled = false
          T.vaildateData = '重新获取'
          T.VaildateNewBtn = 'VaildateNewBtn'
          T.vaildataNum = 60
        }
      }, 1000)
    },
    // 手机输入框失去焦点怕判断格式
    phoneBlur: function () {
      this.phoneInput()
    },
    phoneInput: function () {
      if (this.phone === '') {
        this.phoneError = '手机号码不能为空'
        this.phoneTrue = false
        this.phoneIcon = 'VaildateErrori'        
      } else if (!(/^1(3[0-9]|4[579]|5[0-35-9]|7[0-9]|8[0-9])\d{8}$/.test(this.phone))) {
        this.phoneError = '手机号码格式不正确'
        this.phoneTrue = false
        this.phoneIcon = 'VaildateErrori'           
      } else {
        this.phoneError = ''
        this.phoneTrue = true
        this.phoneIcon = 'phoneIcon'     
      }
    },
    // 点击关闭及取消,关闭弹出框
    vaildateClose: function () {
      this.identityBox = ''
    },
    // 验证码失去焦点判断
    vaildateB: function () {
      if (this.vaildateVal === '') {
        this.vaildataIcon = 'VaildateErrori'        
        this.VaildateErrorCon = '请输入验证码'        
      } else {
        this.vaildataIcon = 'phoneIcon'        
        this.VaildateErrorCon = ''
      }
    },
    // 验证码获取焦点判断
    vaildateF: function () {
      this.vaildataIcon = ''        
      this.VaildateErrorCon = ''
    },
    // 点击验证码框确定
    vaildateBut: function () {
      if (this.vaildateVal !== '') {
        var passwordI;
        if (this.typeNum === 0) {
//        var obj = {
//	          'identityShow': true,
//	          'passwordShow': false,
//	          'completeShow': false,
//	          'identityShowI': true,
//	          'passwordShowI': false,
//	          'completeShowI': false,
//	        }
        } else {
//        var obj = {
//	          'identityShow': false,
//	          'passwordShow': true,
//	          'completeShow': false,
//	          'identityShowI': false,
//	          'passwordShowI': true,
//	          'completeShowI': false,
//	        }
        }
         var obj = {
	          'identityShow': false,
	          'passwordShow': true,
	          'completeShow': false,
	          'identityShowI': false,
	          'passwordShowI': true,
	          'completeShowI': false,
	        }
        this.$emit('flowPClick', obj);
      } else {
        this.vaildataIcon = 'VaildateErrori'        
        this.VaildateErrorCon = '请输入验证码' 
      } 
    }
  }
}
</script>

<style>
    @import '../../../static/register/identity.css'
</style>
